<template>
    <section class="content-box">
    	<div>
            <el-col class="toolbar">
            <el-col :span="12">
                <h2>预算主档</h2>
            </el-col>
        </el-col>
              <el-col class='toolbar'>      
              <el-col :span="24">
                <span>预算树：</span>
                <el-select v-model="Bud" @change="depares" filterable placeholder="请选择">
                    <el-option v-for="item in BudeList" :key="item.index" :label="item.Name" :value="item.Code"></el-option>
                </el-select>
                <span>部门：</span>
                <el-select v-model="Depar" @change="sCode" filterable placeholder="请选择">
                    <el-option v-for="item in epartment" :key="item.index" :label="item.Name" :value="item.Code"></el-option>
                </el-select>
                <span>预算类型：</span>
                <el-select v-model="budgeType" @change="hmBox" filterable placeholder="请选择">
                    <el-option v-for="item in  budgetaryType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-button type="primary" @click="Atain">确定</el-button>                     
            </el-col>
            </el-col> 
            <!--列表-->
            <el-table :data="tableData" border   max-height="750">
                <el-table-column fixed prop="BudgetItemName" label="预算科目" width="300" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="1月累计" header-align="center">
                  <el-table-column prop="Month1_p"label="年初预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month1_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month1_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month1_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month1_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month1_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="2月累计" header-align="center">
                   <el-table-column prop="Month2_p"label="年初预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month2_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month2_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month2_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month2_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month2_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="3月累计" header-align="center">
                   <el-table-column prop="Month3_p"label="年初预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month3_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month3_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month3_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month3_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month3_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="4月累计" header-align="center">
                   <el-table-column prop="Month4_p"label="年初预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month4_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month4_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month4_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month4_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month4_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="5月累计" header-align="center">
                   <el-table-column prop="Month5_p"label="年初预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month5_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month5_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month5_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month5_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month5_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="6月累计" header-align="center">
                  <el-table-column prop="Month6_p"label="年初预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month6_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month6_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month6_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month6_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month6_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="7月累计" header-align="center">
                   <el-table-column prop="Month7_p"label="年初预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month7_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month7_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month7_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month7_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month7_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="8月累计" header-align="center">
                   <el-table-column prop="Month8_p"label="年初预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month8_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month8_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month8_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month8_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month8_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="9月累计" header-align="center">
                   <el-table-column prop="Month9_p"label="年初预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month9_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month9_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month9_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month9_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month9_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="10累计" header-align="center">
                   <el-table-column prop="Month10_p"label="年初预算" width="120"align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month10_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month10_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month10_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month10_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month10_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="11月累计" header-align="center">
                   <el-table-column prop="Month11_p"label="年初预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month11_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month11_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month11_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month11_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month11_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="12月累计" header-align="center">
                   <el-table-column prop="Month12_p"label="年初预算" width="120" align="right" :formatter="dealF">
                   </el-table-column>
                    <el-table-column prop="Month12_a"label="调整预算" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month12_u"label="预算使用" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                  <el-table-column prop="Month12_c"label="预算执行" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month12_s"label="执行差异" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                   <el-table-column prop="Month12_r"label="执行率" width="120" align="right" :formatter="dealF">
                  </el-table-column>
                </el-table-column>
            </el-table>
        	</div>
    </section>
</template>

<script>
import axios from '../../util/axios';
export default {
    name: 'zizhi',
    data() {
        return {
        	BudeList:[],//请求预算树列表
        	Bud:'',
         	budgeType:'1', //预算类型
          	tableData:[],
          	fnName:0,
          	epartment:'',
          	Depar:0,
          	fuCode: '',
          	fYCode: '',
          	DeparCode:0,
          	budgetaryType: [{
	          value: '1',
	          label: '权责'
	        }, {
	          value: '3',
	          label: '现金'
	        }],
	        value: '',     
	    }
    },
    methods: {
        //请求列表数据
        //budgetMa  预算主档接口
            Atain(){
	            console.log(this.fnName,this.Depar,this.budgeType);
	            this.Alllist();
            },
            Alllist(){   //总表
		            axios.post('budgetMa',{
		                yearBudget:this.fnName, 
		                dept: this.Depar,
		                budgetType:this.budgeType  
		            }).then(data=>{
		              console.log('总表',data)
		              this.tableData = data      
		            }).catch(err=>{
		                console.log(err)
		            })
		  },

           budhetTree(){ //预算树选项列表
           		let yusuanshu = {Code:"0",Name:"全部"}
           		axios.post('BudgetList', {
                    year: 2017
                }).then(res => {
                    console.log(res)
                    res.unshift(yusuanshu)
                    this.BudeList = res
                    this.Bud = this.BudeList[0].Code
                }).catch(err => {
                    console.log(err)
                }) 

           },
           depares(){    //预算树下拉事件
		        console.log('预算树选值',this.Bud)
		        this.fnName = this.Bud
		        this.Department();
           },
            Department() { //部门列表接口
                    console.log('部门选值',this.fnName)
                    let bumen = {Code:"0",Name:"全部"}
                	axios.post('DepartmentList', {
	                    yearbudget: this.fnName
	                }).then(res => {
	                	console.log(res,"部门列表~~~~")
	                	res.unshift(bumen)
	                    this.epartment = res
	                    this.Depar = this.epartment[0].Code
	                }).catch(err => {
	                    console.log(err)
	                })
            },
             sCode(){
             this.fYCode = this.Depar
            },
            hmBox(){
              console.log(this.budgeType)      
            },
            dealF(e,cell,cellValue) {
					console.log("1111111",cellValue)
					if(cellValue == 0){
						return ''
					}else{
						return cellValue
					}	   
				},

           
    },
    created(){
        this.budhetTree();
        this.Alllist()
    },
    mounted() {
       
       
    },
    }

</script>
<style scoped lang="scss">
@import '../../common/css/index.css';
.toolbar {
    h2 {
        font-weight: 100;
        margin: 0 auto;
    }
};
</style>
